<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钱玉莹-放大镜</title>
    <link rel="stylesheet" href="../css/fangdajing.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body>
    <!--顶层导航上的产品官网 -->
    <div class="top-banner">
        <!-- 5g大图 -->
        <div class="top-banner-cen">
            <img  class="banner-pic1" src="../img/guanwang.png" alt="">
        </div>
    </div>

    <!-- 导航层 -->
    <div class ="nav">
         <div class="nav-cen">
            <!-- 左侧导航栏 -->
            <!-- 首页 -->
            <div class="top-banner-lef fl">
                <ul class="navul1 fl">
                    <li> <a href="#">首页</a> <span class="shu">|</span></li>
                    <li><a href="#">某街官网</a> <span class="shu">|</span></li>
                    <li> <a href="#">花粉俱乐部</a> <span class="shu">|</span></li>
                    <li><a href="#">V码（优购码）</a> <span class="shu">|</span></li>
                    <li><a href="#">企业购</a> <span class="shu">|</span></li>
                    <li><a href="#">Select Region</a> <span class="shu">|</span></li>
                    <li class="navli1"><a href="#">更多精彩^</a> </li>
                </ul>
            </div>

            <!-- 右侧导航 -->  <!-- 注册登录部分 -->
            <div class="top-banner-rig ">
                <ul class="navul2 ">
                    <li class="navli2"> <a href="#">请登录 <span>注册</span></a> <span class="shu">|</span></li>
                    <li><a href="#">我的订单</a> <span class="shu">|</span></li>
                    <li> <a href="#">客户服务</a> <span class="shu">|</span></li>
                    <li><a href="#">网站导航</a> <span class="shu">|</span></li>
                    <li><a href="#">手机版</a> <span class="shu">|</span></li>
                    <li><a href="#">购物车</a> </li>
                </ul>
            </div>
        </div> 
    </div>

        <!--华为商城-- 搜索栏-->
        <div class="search">
            <div class="search-cen">
                <!-- 官网产品图片 -->
                <div class="search-img">
                    <img src="../img/moguji.png" alt="华为商城">
                </div>
                
            <!-- 华为专区 -->
            <div class="search-nav fl">
                <ul class="searchul3 fl">
                    <li class="searchul3-active"><a href="#">某街专区</a></li>
                    <li><a href="#">莫塞尔专区</a></li>
                    <li><a href="#">某街智慧屏</a></li>
                    <li><a href="#">智能家居</a></li>
                    <li><a href="#">教育优惠</a></li>
                </ul>
            </div>

            <!-- 搜索框 -->
            <div class="searchwer ">
                <p class="fl"><a href="#">某街新品</a></p>
                <p class="fl"><a href="#">Mate X2</a></p>
            </div>
            <div class="container"></div>
             <!-- 左侧放大镜 -->
            <!-- 左侧导航区 -->

        <!--华为商城-- 搜索栏-->
        

            
             <!-- 左侧放大镜 -->
            <!-- 左侧导航区 -->
            
        
    
    <script src="../js/cookie.js"></script>
    <!-- <script src="../js/mag1.js"></script> -->
    <script src="../js/tools.js"></script>
    <script src="../js/jquery.min.js"></script>
    <!-- <script>
        const imgArr=[
            {large:'../img/da1.png',small:'../img/fangdapic1 (2).png'},
            {large:'../img/da5.png',small:'../img/fangdapic1 (5).png'},
            {large:'../img/da4 .png',small:'../img/fangdapic1 (4).png'},
        ]
        const oBox = document.querySelector('.box')

        const magnifyObj = new setMagnify(oBox , imgArr)
        // magnifyObj.init()
    </script> -->
        <script>
//  1, 获取 url地址栏中携带的数据信息
const urlObj = getUrlVal();
console.log( urlObj );

// 定义变量 存储 res 也就是 ajax请求 响应的商品信息对象数据
let msgObj;

//  2, 向后端PHP程序发送请求
$.ajax({
  url:'../server/goods_detail.php',
  type:'get',
  data:{goods_id:urlObj.goods_id},
  dataType: 'json',
  success:res=>{
    console.log(res);

    // 将 获取的 res 也就是当前商品信息存储在变量中
    msgObj = res;

    // 根据数据动态生成页面内容
    let str = `
    <div class="fangda-banner-nav">
                
            </div>
           
            <!-- 左侧放大镜 -->
            <div class = "big ">
                <div class = "box">
                    <div class="showtime">
                        <!-- <img> -->
                        <a href="#">
                            <img class="media-object" src="${res.goods_small_logo}" alt="...">
                          </a>
                        <div class="cover"></div>
                    </div>
                    <ul class="list"> </ul>
                    <div class="magnify"></div>
                </div>
                <!-- 右侧 介绍-->
                <div class = "pro">
                   <!-- <h2 class = "pro-title">华为畅享20 SE 8GB+128GB 全网通版（幻夜黑）</h2> -->
                   <h2 class = "pro-title">${res.goods_name}</h2>
                   <h4  class = "pro-slogan">6.67英寸全高清大屏；22.5W华为超级快充；5000 mAh大电池；侧边指纹，靓丽设计</h4>
                    <div class="price">
                        <!-- <p class="pro-price">价格：￥1499</p> -->
                        <p class="pro-price">${res.goods_price}</p>
                        <p class="pro-lan">促销：购买即赠商城积分，积分可抵现~</p>
                    </div>
                    <div class="pro-info">
                        <p class="info-dress">配送地址：北京市 昌平区 沙河路</p>
                        <div class="info-box">
                            <div class="info-math">数量</div>
                            <div class=" info-x ">
                                <ul class="info-y ">
                                    <li>-</li>
                                    <li>2</li>
                                    <li>+</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="info-buy">
                        <div class="buy">
                            <!-- 立即购买 -->
                            <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
                        </div>
                        <div class="buy2">
                            <!-- 加入购物车 -->
                            <a href="javascript:;" name="cart" class="btn btn-danger btn-lg" role="button">加入购物车</a>
                        </div>               
                    </div>
                </div>
                <!--底部-->
                <div class="bottom">
                    <div class="bottom-cen">
                      <div class="bottom-cenn">
                        <ul>
                            <li class="bottom-li"><a href="#"> 某街账户协议</a></li>
                            <li class="bottom-li"><a href="#"> 某街账户协议</a></li>
                            <li class="bottom-li"><a href="#"> 某街账户协议</a></li>
                            <li class="bottom-li"><a href="#"> 某街账户协议</a></li>
        
                        </ul>
                    </div>
                  </div>
                    
        
                  </div> 


            </div>
        </div>     
        </div>  
    `;
      
    // 将字符串结果写入到标签中
    $('.container').html(str);
    }
    })

    //  3, 通过事件委托 给 加入购物车按钮 添加事件
    $('.container').on( 'click' , '[name="cart"]' , function(){
      
      // 先获取 cookie 存储的数据信息
      const cookieObj = myGetCookie();
      console.log( cookieObj );
  
      // 根据 cookieObj 存储的数据 执行if判断
      if( cookieObj.login === undefined ){
        // 如果 调用 login 键名 获取的结果是 undefined 证明没有登录
        if( window.confirm('您还没有登录,点击确定跳转登录页面') ){
          window.location.href = `./login.html?url=${window.encodeURIComponent(window.location.href)}`;
        // console.log(1)
        }
      }else{
        // 已经有了 login 登录信息 将当前商品的信息添加到购物车数据中 跳转购物车页面
        // 1, 获取 localStorage 中 存储的数据信息 键名是 cart
        // 如果有   cart数据 也就是有购物车信息  是 存储的具体的数据
        // 如果没有 cart数据 也就是没有购物车信息 是 null
        const goodsObj = JSON.parse(localStorage.getItem('cart'));
  
        // 根据 goodsObj 获取的数据结果,执行判断
        if( goodsObj === null ){
          // 没有购物车信息 直接创建购物车信息 添加 当前商品内容
  
          // 给 当前商品信息中添加键值对
          // 购买数量 默认是 1
          msgObj.num = 1;
          // 是否购买结算 默认值 是true
          msgObj.bool = true;
  
          // 设定 localStorage 键值对
          // 以 json字符串形成 存储 数组嵌套对象的数据形式
          localStorage.setItem( 'cart' , JSON.stringify( [ msgObj ] ) );
        }else{
          // 有购物车数据信息
          // 判断 msgObj 数组中 存储的对象 没有 当前商品对象
  
          // 方法1 循环遍历
          let bool = true;
  
          for( let i = 0 ; i <= goodsObj.length-1 ; i++ ){
            // goodsObj是当前 购物车数组 
            // goodsObj[i] 是 对应的 某一个商品
            // goodsObj[i].goods_id 就是 这一个存储的商品的id主键值
            // msgObj.goods_id 是 当前商品的 id主键值
            // 存储的商品 和 当前商品 是同一个商品
            if( goodsObj[i].goods_id === msgObj.goods_id ){
              // 有当前商品 给 当前商品id主键值相同的数据 num存储的数值累加1
              goodsObj[i].num++;
              // 变量赋值 false
              bool = false;
              break;
            }
          }
  
          if(bool){
            // 如果 bool 是 true 证明 没有id主键值相等的情况
            // 证明 购物车中没有当前商品
            // 新增当前商品信息
  
            // 给 当前商品信息中添加键值对
            // 购买数量 默认是 1
            msgObj.num = 1;
            // 是否购买结算 默认值 是true
            msgObj.bool = true;
            // 将 当前商品信息 写入 购物车数组中
            goodsObj.push( msgObj );
  
            // 将 添加了 新的对象的数组 , 写入到 cart 键名中
            localStorage.setItem( 'cart' , JSON.stringify( goodsObj ) );
  
          }else{
            // 如果 bool 是 false 证明 有id主键值相等的情况
            // 证明 购物车中 有当前商品
            // 购物车 数据数组 已经 在 循环中修改 购买数量 已经累加1
            // 只需要将 新的 数组 也就是 购买数量累加1的数组
            // 重新 设定给 购物车信息
            localStorage.setItem( 'cart' , JSON.stringify( goodsObj ) );
  
          }
        }
        
        // 设定好购物车信息之后,可以跳转 购物车页面了
        window.location.href = './cart.html';
  
      }
    })

    // const imgArr=[
    //         {large:'../img/da1.png',small:'../img/fangdapic1 (2).png'},
    //         {large:'../img/da5.png',small:'../img/fangdapic1 (5).png'},
    //         {large:'../img/da4 .png',small:'../img/fangdapic1 (4).png'},
    //     ]
    //     const oBox = document.querySelector('.box')

    //     const magnifyObj = new setMagnify(oBox , imgArr)
        </script>

</body>
</html>